<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>30jQuery事件委托</title>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            $(function (param) {  
                /*
                1.什么是时间委托？
                请别人帮忙做事情，然后将做完的结果反馈给我们
                可以找一个在入口函数执行之前就有的元素，来监听动态添加的某些元素的事件
                */
                $("button").click(function (param) {  
                    $("ul").append("<li>我是新增的li</li>");
                })
                /*
                在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件
                */
                $("ul>li").click(function (param) {
                    console.log($(this).html());
                  });
                
                $("ul").delegate("li","click",function (param) { //把li的click事件 委托给ul监听
                    console.log($(this).html());
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>我是第一个li</li>
            <li>我是第二个li</li>
            <li>我是第三个li</li>
        </ul>
        <button>新增li</button>
    </body>
</html>